<div class="chatUtils">
    <div class="his-body">
        <div class="sessionListForAgent searchKeyword hisMain" v-show="viewAgent && active == 1">
            <div class="searchInput">
                    <input type="text" :placeholder="i18n.agent.search" v-model="filetername" class="keySearch">
                    <input type="number" :placeholder="i18n.agent.searchSession" v-model="filetersession" class="keySearch">
                <div class="hisInput">
                    <span>{{i18n.agent.startTime}}<input type="date" v-model="fileterstart" :placeholder="i18n.agent.startTime" class="keySearch"></span>
                </div>
                <div class="hisInput">
                    <span>{{i18n.agent.endTime}} <input type="date" v-model="fileterend" :placeholder="i18n.agent.endTime" class="keySearch"></span>
                </div>
                <span><a href="###" class="refresh" @click="loadSessions()" v-text="i18n.agent.refresh"></a></span>
            </div>
            <ul class="list-head">
                <li>
                    <span>{{i18n.agent.nickname}}</span>
                    <span>{{i18n.agent.date}}</span>
                    <span>{{i18n.agent.times}}</span>
                    <span>{{i18n.agent.sessionid}}</span>
                    <span>{{i18n.agent.rate}}</span>
                    <span>{{i18n.agent.rateContent}}</span>
                </li>
            </ul>
            <ul class="list-body">
                <li v-for="(session, index) in showSessions"
                    :class="{active: sessionId == session.sessionId}"
                    @dblclick="showTalksForDoubleClick(session.sessionId)">
                    <span v-text="session.clientName"></span>
                    <span v-text="session.dateAndTime"></span>
                    <span v-text="session.duration"></span>
                    <span v-text="session.sessionId"></span>
                    <span v-text="session.ratingDesp"></span>
                    <span v-text="session.ratingContent"></span>
                </li>
            </ul>
            <div class="talkDialogback" @click="hideShow()">
            </div>
        </div>
        <div class="searchListForAgent hisMain searchKeyword" v-show="viewSearch && active == 2">
            <div class="searchInput">
                <input type="search" :placeholder="i18n.search.placeholder" v-model="keyword" class="keySearch"/>
                <input type="button" :value="i18n.search.search" v-on:click="searchKeyWord" class="searchBtn"/>
            </div>
            <ul class="list-head">
                <li>
                    <span>{{i18n.search.messageId}}</span>
                    <span>{{i18n.search.alias}}</span>
                    <span>{{i18n.search.date}}</span>
                    <span>{{i18n.search.score}}</span>
                    <span>{{i18n.search.message}}</span>
                </li>
            </ul>
            <ul class="list-body">
                <li v-for="(search, index) in sessionsForSearch" @dblclick="showTalksForDoubleClick(search.sessionId)">
                    <span v-text="search.messageId" style="width: 100px"></span>
                    <span v-text="search.user.firstName || search.user.alias || search.user.agentId || search.user.Id"
                          style="width: 100px"></span>
                    <span>{{new Date(search.messageCreateTime).format(i18n.search.datetimeFomate)}}</span>
                    <span v-text="(search.score).toFixed(2)"></span>
                    <span v-html="heightLight(search.message)"></span>
                </li>
            </ul>
            <div class="talkDialogback" @click="hideShow()">
            </div>
        </div>
        <div class="talkDialog">
            <chat-talk
                    :talkName="name"
                    v-bind:serverUrl="url"
                    v-bind:prsession="sessionId"
                    v-bind:token="token"
                    v-bind:ds="ds"
                    v-bind:save-chat="saveChat"
                    :height-light="heightLightKey"
                    :mark-message="markMessage">
            </chat-talk>
        </div>
    </div>
    <div class="his-tool" v-show="toolBar">
        <span :class="{active: active == 0}" class="showAll" @click="changeUI(0)" v-show="viewClient"
              :title="i18n.bartool.clientAlt">
            <i class="fa fa-address-card"></i>
            <span>{{i18n.bartool.client}}</span>
        </span>
        <span :class="{active: active == 1}" class="showPerson" @click="changeUI(1)" v-show="viewAgent"
              :title="i18n.bartool.agentAlt">
        <i class="fa fa-list-alt"></i>
        <span>{{i18n.bartool.agent}}</span>
        </span>
        <span :class="{active: active == 2}" class="searchKeyword" @click="changeUI(2)" v-show="viewSearch"
              :title="i18n.bartool.searchAlt">
        <i class="fa fa-search"></i>
        <span>{{i18n.bartool.search}}</span>
        </span>
    </div>
</div>